<!DOCTYPE html>
<html lang="en"  xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon"  th:href="@{/image/favicon.ico}" type="image/x-icon">
    <title>信息填写</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <link rel="stylesheet" th:href="@{/css/personal-info.css}">
    <script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/vue.min.js}"></script>
</head>
<body>

<div id="head">
    <a href="#" class="return_img float_left"><img  src="/image/icon-fanh.png" alt=""></a>
    <p class="head_title">信息填写</p>
</div>
<div id="personalInfo_box">
    <form action="#" method="post" id="info">
        <p><span class="required">*</span><span>姓名</span><input type="text" id="userName"  placeholder="请输入" autocomplete="off" class="float_right"></p>
        <p><span class="required">*</span><span>性别</span><input type="text" id="userSex" placeholder="请输入" autocomplete="off" class="float_right"></p>
        <p><span class="required">*</span><span>出生年月</span><input type="text" id="userBirth" placeholder="2012-12-12" autocomplete="off" class="float_right"></p>
        <p><span class="required">*</span><span>身份证号码</span><input type="text" id="userCardId" placeholder="请输入" autocomplete="off" class="float_right"></p>
        <p><span class="required">*</span><span>手机号码</span><input type="text" id="userTel" placeholder="请输入" autocomplete="off" class="float_right"></p>
        <p><span>籍贯</span><input type="text" id="userJig" placeholder="请输入" autocomplete="off" class="float_right"></p>
        <p><span>民族</span><input type="text" id="userMinz" placeholder="请输入" autocomplete="off" class="float_right"></p>
        <p><span>地址</span><input type="text" id="userAddr" placeholder="请输入" autocomplete="off" class="float_right"></p>
    </form>
    <!--下一步-->
    <div class="next_step">下一步</div>
</div>

    <script type="text/javascript">
        $('.next_step').on('click',function () {
            var  userName = $('#userName').val();
            var userSex = $('#userSex').val();
            var userBirth = $('#userBirth').val();
            var userCardId = $('#userCardId').val();
            var userTel = $('#userTel').val();
            var userJig = $('#userJig').val();
            var userMinz = $('#userMinz').val();
            var userAddr = $('#userAddr').val();
            if(userSex=='男'){
                userSex = 1;
            }else if(userSex=='女'){
                userSex = 2;
            }else {
                $('#userSex').focus();
            }
           // 判断必填项
            var userRequired =[userName,userSex,userBirth,userCardId,userTel];
            for(var i=0;i<userRequired.length;i++){
                if(userRequired[i]==''){
                    console.log('请输入');
                    $('#info').find('input').eq(i).focus();
                    return false;
                }
            }
            var user = {
                userName:userName,
                userSex:userSex,
                userBirth:userBirth,
                userCardId:userCardId,
                userTel:userTel,
                userJig:userJig,
                userMinz:userMinz,
                userAddr:userAddr
            };
            $.ajax({
               url:'/html/add',
                type:'get',
                async:true,
                data:user,
                dataType:'json',
                success:function (result) {
                    console.log(result);
                },
                error:function (err) {
                    console.log(err);
                }
             });
           window.location.href = '/html/mediate-guide';
        })
    </script>
</body>
</html>